<template>
  <div>
    <a-timeline>
      <a-timeline-item
        v-for="(item, i) in data"
        :key="i"
      >
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
        <span>{{ item.userName }}</span>
        <span>({{ item.deptName }})</span>
        <span>：</span>
        <div class="pre-text-opinion" v-html="item.opinion">}}</div>
        <span class="time">({{ dateFormat('YYYY-mm-dd HH:MM:SS', new Date(item.createTime)) }})</span>

        <span class="btn-wrapper">
          <a-popconfirm
            v-if="item._delete"
            title="确定撤回?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="$emit('item-delete', item)"
          >
            <a-button
              class="btn"
              type="default"
              shape="round"
              icon="delete"
              size="small"
            >撤回</a-button>
          </a-popconfirm>
        </span>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<script>
export default {
  name: 'OpinionTimeline',
  props: {
    data: Array
  }
}
</script>

<style scoped lang="less">
.pre-text-opinion {
  display: inline-block;
  vertical-align: top;
}
.time {
  margin-left: 15px;
}
.btn-wrapper {
  margin-left: 15px;
}
</style>
